<!--
 * @Author: sxb
 * @Email: sxb@mail.com
 * @Date: 2020-03-11 14:34:22
 * @Descripttion: 
 -->
<div nz-row nzGutter="5">
    <div nz-col nzSpan="1" style="width: 86px;">
        <label class="line-height-32-prefix">任务单：</label>
    </div>
    <div nz-col nzSpan="4">
        <input nz-input appHotSearch (hotSearchEmit)="taskSearch()" placeholder="请输入任务单" [(ngModel)]="txtTaskCode" />
    </div>
    <div nz-col nzSpan="2">
        <label class="line-height-32-prefix">销售单：</label>
    </div>
    <div nz-col nzSpan="4">
        <input nz-input appHotSearch (hotSearchEmit)="taskSearch()" placeholder="请输入销售单" [(ngModel)]="txtSaleCode" />
    </div>
    <div nz-col nzSpan="2">
        <label class="line-height-32-prefix">出库单：</label>
    </div>
    <div nz-col nzSpan="4">
        <input nz-input appHotSearch (hotSearchEmit)="taskSearch()" placeholder="请输入出库单" [(ngModel)]="txtStockOutCode" />
    </div>
    <div nz-col nzSpan="2">
        <label class="line-height-32-prefix">产品编码：</label>
    </div>
    <div nz-col nzSpan="4">
        <input nz-input appHotSearch (hotSearchEmit)="taskSearch()" placeholder="请输入产品编码" [(ngModel)]="txtMaterialCode" />
    </div>
</div>
<div nz-row nzGutter="5" class="margin-top-16">
    <div nz-col nzSpan="1" style="width: 86px;">
        <label class="line-height-32-prefix">收货单位：</label>
    </div>
    <div nz-col nzSpan="4">
        <input nz-input appHotSearch (hotSearchEmit)="taskSearch()" placeholder="请输入收货单位" [(ngModel)]="txtRecenterprise" />
    </div>
    <div nz-col nzSpan="3">
        <label class="line-height-32-prefix">任务单状态：</label>
    </div>
    <div nz-col nzSpan="4">
        <nz-select class="select_item" nzDropdownClassName="select_custom" [(ngModel)]="selStatus" class="width-10000" (ngModelChange)="selTaskStatus($event)">
            <nz-option nzValue="" nzLabel="全部"></nz-option>
            <nz-option nzValue="0" nzLabel="未处理"></nz-option>
            <nz-option nzValue="1" nzLabel="处理中"></nz-option>
            <nz-option nzValue="2" nzLabel="已处理"></nz-option>
        </nz-select>
    </div>
    <div nz-col nzSpan="2">
        <label class="line-height-32-prefix">生成时间：</label>
    </div>
    <div nz-col nzSpan="4">
        <nz-range-picker nzDropdownClassName="date-range" ngModel (ngModelChange)="onTaskDateChange($event)">
        </nz-range-picker>
    </div>
    <!-- <div nz-col nzSpan="4">
        <button nz-button nzType="primary" (click)="taskSearch()">查询</button>
    </div> -->
</div>
<div nz-row nzGutter="16" class="margin-top-16">
    <!-- <div nz-col nzSpan="2" class="line-height-32">
        任务单列表
    </div> -->
    <div nz-col nzSpan="10">
        <button nz-button nzType="primary" (click)="ShowBoxingRCPT()" *ngIf="boxingRoles.add">新建装箱单</button>
    </div>
</div>
<div nz-row class="margin-top-16">
    <nz-table nzTitle="任务单列表" #taskTable nzBordered [nzData]="taskListData" [nzFrontPagination]="false"  nzSize="small">
        <thead>
            <tr>
                <th colspan="1">选择</th>
                <th>任务单号</th>
                <th>销售单号</th>
                <th>出库单号</th>
                <th>产品编码</th>
                <th>产品名称</th>
                <th>产品规格</th>
                <th>计量数量</th>
                <th>已装箱数量</th>
                <th>任务单状态</th>
                <th>收货单位</th>
                <th>生成时间</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of taskTable.data">
                <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="checkTaskSingle(data)">
                </td>
                <td>{{ data.taskcode }}</td>
                <td>{{ data.salecode }}</td>
                <td>{{ data.stockoutcode }}</td>
                <td>{{ data.materialCode }}</td>
                <td>{{ data.materialName }}</td>
                <td>{{ data.materialSpecs }}</td>
                <td>{{ data.outnum }}</td>
                <td>{{ data.finishnum }}</td>
                <td>{{ data.status != null 
                    ? data.status == 0 ? "未处理"
                    : data.status == 1 ? "处理中"
                    : data.status == 2 ? "已处理"
                    : "其他"
                    : "" }}</td>
                <td>{{ data.recenterprise }}</td>
                <td>{{ data.createDate }}</td>
            </tr>
        </tbody>
    </nz-table>
    <div nz-row *ngIf="taskListData.length!=0" class="margin-top-16">
        <nz-pagination class="float-right" (nzPageIndexChange)="taskClickPage($event)" [(nzPageIndex)]="taskPageIndex" [nzTotal]="taskTotalSize"
            [nzShowTotal]="totalTemplate"></nz-pagination>
        <ng-template #totalTemplate let-total> 总共 {{taskTotalSize}} 条 </ng-template>
    </div>
</div>
<div nz-row nzGutter="16" class="margin-top-16">
    <!-- <div nz-col nzSpan="2" class="line-height-32">
        装箱单列表
    </div> -->
    <div nz-col nzSpan="10">
        <button nz-button nzType="primary" (click)="ShowPackBoxing()" *ngIf="boxingBucketDetailRoles.add">装箱</button>
        <button nz-button nzType="primary" class="margin-left-16">打印装箱单</button>
        <button nz-button nzType="primary" class="margin-left-16">装箱扫描</button>
    </div>
</div>
<div nz-row class="margin-top-16">
    <nz-table nzTitle="装箱单列表" #listTable nzBordered [nzData]="listData" [nzFrontPagination]="false"  nzSize="small">
        <thead>
            <tr>
                <th colspan="1">选择</th>
                <th>装箱单编号</th>
                <th>产品编号</th>
                <th>箱号</th>
                <th>桶数</th>
                <th>重量kg</th>
                <th>装箱类型</th>
                <th>装箱人</th>
                <th>装箱时间</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of listTable.data">
                <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="checkBoxDetailSingle(data)">
                </td>
                <td>{{ data.boxcode }}</td>
                <td>{{ data.materialCode }}</td>
                <td>{{ data.boxnum }}</td>
                <td>{{ data.bucketnum }}</td>
                <td>{{ data.weight }}</td>
                <td>{{ data.boxtype }}</td>
                <td>{{ data.boxperson }}</td>
                <td>{{ data.boxdate }}</td>
            </tr>
        </tbody>
    </nz-table>
    <div nz-row *ngIf="listData.length!=0" class="margin-top-16">
        <nz-pagination class="float-right" (nzPageIndexChange)="clickPage($event)" [(nzPageIndex)]="pageIndex" [nzTotal]="totalSize" [nzShowTotal]="totalTemplate"></nz-pagination>
        <ng-template #totalTemplate let-total> 总共 {{totalSize}} 条 </ng-template>
    </div>
</div>
<!-- <div nz-row nzGutter="16" class="margin-top-16">
    <div nz-col nzSpan="4" class="line-height-32">
        装箱单详细信息
    </div>
</div> -->
<div nz-row class="margin-top-16">
    <nz-table nzTitle="装箱单详细信息" #detailListTable nzBordered [nzData]="detailListData" [nzFrontPagination]="false"  nzSize="small">
        <thead>
            <tr>
                <th>桶编号</th>
                <th>桶重kg</th>
                <!-- <th>产品编号</th>
                <th>产品名称</th> -->
                <th>产品批次</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of detailListTable.data">
                <td>{{ data.bucketnum }}</td>
                <td>{{ data.weight }}</td>
                <!-- <td> 缺字段 </td>
                <td> 缺字段 </td> -->
                <td>{{ data.productBatch }}</td>
            </tr>
        </tbody>
    </nz-table>
    <div nz-row *ngIf="detailListData.length!=0" class="margin-top-16">
        <nz-pagination class="float-right" (nzPageIndexChange)="detailClickPage($event)" [(nzPageIndex)]="detailPageIndex" [nzTotal]="detailTotalSize" [nzShowTotal]="totalTemplate"></nz-pagination>
        <ng-template #totalTemplate let-total> 总共 {{detailTotalSize}} 条 </ng-template>
    </div>
</div>
<div id="modal_box"></div>
<nz-modal [nzStyle]="{left:'28%',top:'50px'}" appDragModal [nzGetContainer]="modalDomBox" [(nzVisible)]="visBoxingRCPT" nzTitle="新建装箱单" nzMaskClosable="false" (nzOnCancel)="BoxingRCPTCancel()" (nzOnOk)="BoxingRCPTOk()"
    [nzOkLoading]="isOkLoading" nzWidth="45%">
    <div class="returnproduct-manage">
        <form nz-form [formGroup]="validateBoxingForm">
            <div nz-row nzGutter="16">
                <div nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="8">收货单位</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input nz-input formControlName="txtReptRecenterprise" [ngModel]="txtReptRecenterprise" placeholder="请输入收货单位" [disabled]="true"/>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="8" >产品编码</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input nz-input formControlName="txtReptMaterialCode" [ngModel]="txtReptMaterialCode" placeholder="请输入产品编码" [disabled]="true"/>
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>
            <div nz-row nzGutter="16">
                <div nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="8">产品名称</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input nz-input formControlName="txtReptMaterialName" [ngModel]="txtReptMaterialName" placeholder="请输入产品名称" [disabled]="true"/>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="8" nzRequired>装箱类型</nz-form-label>
                        <nz-form-control [nzSpan]="16" nzErrorTip="请输入装箱类型">
                            <input nz-input formControlName="txtBoxType" placeholder="请输入装箱类型" />
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>
            <div nz-row nzGutter="16">
                <div nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="8" nzRequired>装箱日期</nz-form-label>
                        <nz-form-control [nzSpan]="16" nzErrorTip="请输入装箱日期">                            
                            <nz-date-picker nzDropdownClassName="date-range" [nzStyle]="{'width':'100%'}" class="width-10000" formControlName="txtBoxDate"></nz-date-picker>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="8" nzRequired>装箱人</nz-form-label>
                        <nz-form-control [nzSpan]="16" nzErrorTip="请输入装箱人">
                            <input nz-input formControlName="txtBoxPerson" placeholder="请输入装箱人" />
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>
            <div nz-row nzGutter="16">
                <nz-form-item>
                    <nz-form-label [nzSpan]="4" nzRequired>箱号</nz-form-label>
                    <nz-form-control [nzSpan]="20" nzErrorTip="请输入箱号">
                        <input nz-input formControlName="txtBoxCode" [ngModel]="txtBoxCode" style="width: 500px;" placeholder="输入箱号后，请按回车键" 
                        (keydown.enter)="addBoxingRCPT(tag)" />
                       
                    </nz-form-control>
                </nz-form-item>
            </div>
        </form>
        <div nz-row class="margin-top-16">
            <nz-table #boxingRCPTTable nzBordered [nzData]="boxingRCPTData" [nzFrontPagination]="false"  nzSize="small">
                <thead>
                    <tr>
                        <th>产品编码</th>
                        <th>产品名称</th>
                        <th>装箱类型</th>
                        <th>箱号</th>
                        <th>装箱日期</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of boxingRCPTTable.data">
                        <td>{{ data.MaterialCode }}</td>
                        <td>{{ data.MaterialName }}</td>
                        <td>{{ data.BoxType }}</td>
                        <td>{{ data.BoxCode }}</td>
                        <td>{{ data.BoxDate }}</td>
                        <td><a href="javascript:;" style="color: red;" (click)="delBoxingRCPT(data)">删除</a></td>
                    </tr>
                </tbody>
            </nz-table>
        </div>
    </div>
</nz-modal>
<nz-modal [nzStyle]="{left:'28%',top:'50px'}" appDragModal [nzGetContainer]="modalDomBox" [(nzVisible)]="visPackBoxing" nzTitle="打包装箱" nzMaskClosable="false" (nzOnCancel)="PackBoxingCancel()" (nzOnOk)="PackBoxingOk()"
    [nzOkLoading]="isOkLoading" nzWidth="45%">
    <div class="returnproduct-manage">
        <form nz-form [formGroup]="validatePackBoxingForm">
            <div nz-row nzGutter="16">
                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="8">产品编码</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input nz-input formControlName="txtPackBoxMaterialCode" [ngModel]="txtPackBoxMaterialCode" placeholder="请输入产品编码" [disabled]="true"/>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="8">产品名称</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input nz-input formControlName="txtPackBoxMaterialName" [ngModel]="txtPackBoxMaterialName" placeholder="请输入产品名称" [disabled]="true"/>
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>
            <div nz-row nzGutter="16">
                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="8" nzRequired>产品批次</nz-form-label>
                        <nz-form-control [nzSpan]="16" nzErrorTip="请输入产品批次">
                            <input nz-input formControlName="txtBoxBatch" [ngModel]="txtBoxBatch" placeholder="请输入产品批次"/>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="8" nzRequired>桶重KG</nz-form-label>
                        <nz-form-control [nzSpan]="16" nzErrorTip="请输入桶重">
                            <nz-input-number formControlName="txtBoxWeight" [ngModel]="txtBoxWeight" [nzMin]="1" [nzStep]="0.1" [nzPlaceHolder]="'请输入桶重'" class="width-10000"></nz-input-number>
                            <!-- <input nz-input formControlName="txtBoxWeight" [ngModel]="txtBoxWeight" placeholder="请输入桶重"/> -->
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>
            <div nz-row nzGutter="16">
                <nz-form-item>
                    <nz-form-label [nzSpan]="4" nzRequired>桶编号</nz-form-label>
                    <nz-form-control [nzSpan]="20" nzErrorTip="请输入桶编号">
                        <input nz-input formControlName="txtBoxBucketNum" [ngModel]="txtBoxBucketNum" style="width: 500px;" placeholder="输入桶编号后，请按钮回车键" (keydown.enter)="addPackBoxingRCPT(tag)" />
                    </nz-form-control>
                </nz-form-item>
            </div>
        </form>
        <div nz-row class="margin-top-16">
            <nz-table #packBoxingTable nzBordered [nzData]="packBoxingData" [nzFrontPagination]="false"  nzSize="small">
                <thead>
                    <tr>
                        <th>桶编码</th>
                        <th>桶重KG</th>
                        <th>产品编号</th>
                        <th>产品名称</th>
                        <th>产品批次</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of packBoxingTable.data">
                        <td>{{ data.BoxBucketNum }}</td>
                        <td>{{ data.BoxWeight }}</td>
                        <td>{{ data.MaterialCode }}</td>
                        <td>{{ data.MaterialName }}</td>
                        <td>{{ data.BoxBatch }}</td>
                        <td><a href="javascript:;" style="color: red;" (click)="delPackBoxing(data)">删除</a></td>
                    </tr>
                </tbody>
            </nz-table>
        </div>
    </div>
</nz-modal>